/*
 * @Author: zelda.zhangze
 * @Date: 2018-06-26 15:03:44
 * @Last Modified by: zelda.zhangze
 * @Last Modified time: 2018-07-09 15:14:52
 */
import type from "@/common/utils/type";
import React, { FC, useEffect, useState } from "react";
import "./index.scss";

export const Switch: FC<any> = (props) => {
  const { onChange, onClick, name, checked, disabled, ...restProps } = props;
  const [isChecked, setIsChecked] = useState(checked || false)
  useEffect(() => {
    if (typeof checked === 'boolean') {
      setIsChecked(checked)
    }
  }, [checked])

  const handleChange = (e) => {
    onChange && onChange(e.target.checked);
  }
  const handleClick = (e) => {
    onClick && onClick(e.target.checked);
  }

  return (
    <div className="cx-switch">
      <input
        test-id="switch"
        type="checkbox"
        name={name}
        className="yt-switch-checkbox"
        checked={isChecked}
        disabled={disabled}
        onChange={(e) => {
          handleChange(e)
        }}
        onClick={(e) => handleClick(e)}
      />
      <div className="checkbox" />
    </div>
  );
};

export default Switch
